<template>
  <div class="vote" v-if="pic">
    <van-nav-bar
      @click-left="goHome"
      title="投票"
      style="font-weight: bold"
      fixed
    >
      <template #left>
        <van-icon name="revoke" color="#fdc03a" size="20" />
      </template>
    </van-nav-bar>

    <van-notice-bar
      style="margin-top: 45px"
      left-icon="volume-o"
      class="classes"
      :scrollable="true"
      text="喜报：本期摄影作品票数前三名为：小虎、小画、小绿 "
    />

    <div class="cardBody">
      <div class="card" v-for="item in pic" :key="item.pid">
        <div>
          <div class="img">
            <div class="first"></div>
            <div class="first2"></div>
            <img :src="`http://39.108.211.154${item.photo}`" alt="" />
            <div class="first3"></div>
          </div>
          <h3>{{ item.pname }}</h3>
          <div class="zuozhe">
            <span>作者:{{ item.p_uname }}</span>
            &nbsp;
            <span>票数:{{ item.vote }}</span>
          </div>
          <div
            @click="
              D_uname = item.p_uname;
              alertData();
            "
            class="btn"
          >
            立即投票
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      pic: null, // 图片
      uvote: 10,
      D_uname: "",
    };
  },
  mounted() {
    this.voteData();
    // 进入页面时弹窗显示用户当前剩余投票数
    this.axios
      .get(
        `http://39.108.211.154:8080/user_username?username=${this.$store.state.user}`
      )
      .then(res => {
        Dialog.alert({
          title: "温馨提示",
          message: `您的当前剩余投票数为${res.data[0].uvote}`,
          theme: "round-button",
          confirmButtonColor: "#fdc03a",
        }).then(() => {
          // on close
        });
      });
  },

  methods: {
    goHome() {
      this.$router.push("/index");
    },
    // 获取图片
    voteData() {
      this.axios.get("http://39.108.211.154:8080/picter").then(res => {
        // console.log(res);
        this.pic = res.data;
      });
    },
    // 摄影作品票数加1
    photoData(uname) {
      let params = `p_uname=${uname}`;
      // console.log(params);
      this.axios
        .post(`http://39.108.211.154:8080/photo_vote`, params)
        .then(res => {
          console.log(res);
        });
    },
    // 用户剩余票数减1
    userData() {
      this.axios
        .get(
          `http://39.108.211.154:8080/user_vote?username=${this.$store.state.user}`
        )
        .then(res => {
          this.uvote = res.data;
          console.log(res);
        });
    },

    alertData() {
      this.axios
        .get(
          `http://39.108.211.154:8080/user_username?username=${this.$store.state.user}`
        )
        .then(res => {
          // console.log(res);
          this.uvote = res.data[0].uvote;
          console.log(this.uvote);
          if (this.uvote <= 0) {
            Dialog.alert({
              // title: "标题",
              message: `投票次数用完啦
    不可以再投了哦༼ つ ◕_◕ ༽つ`,
              theme: "round-button",
              confirmButtonColor: "#fdc03a",
            }).then(() => {
              // on close
            });
          } else {
            this.photoData(this.D_uname);
            this.userData();
            this.voteData();
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.vote {
  // margin: 0 12px;
  .cardBody {
    margin: 10px 12px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    // float: left;

    .card {
      width: 46vw;
      // height: 29vh;
      background-color: white;
      margin: 9px 0;
      // height: 225.22px;
      // float: left;
      // border: 1px solid #fdc03a;
      // padding: 10px;
      > div {
        border: 1px solid #fdc03a;
        text-align: center;
        position: relative;
        overflow: hidden;
        padding: 10px;

        .img {
          // width: 21vw;
          // height: 60%;
          // width: 80%;
          overflow: hidden;
          .first {
            width: 40px;
            background-color: #fdc03a;
            height: 5px;
            position: absolute;
            right: 1vh;
            top: 1vh;
          }
          .first2 {
            width: 5px;
            height: 45px;
            background-color: #fdc03a;
            position: absolute;
            right: 1vh;
            top: 1vh;
          }
          .first3 {
            width: 3vh;
            height: 0.5vh;
            background-color: #fdc03a;
            position: absolute;
          }
          > img {
            display: block;
            width: 47vw;
            height: 30vw;
            margin: 0 auto;
          }
        }
        h3 {
          margin: 12px 0;
          font-size: 4vw;
        }
        .zuozhe {
          width: 100%;
          height: 3vh;
          margin-bottom: 4px;
          line-height: 3vh;
          font-size: 3vw;
        }

        .btn {
          background-color: #fdc03a;
          color: white;
          line-height: 3vh;
          border-radius: 15px;
          // text-align: center;
          display: block;
          font-size: 2vh;
        }
      }
    }
  }
}
</style>
